<template>
	<div class="good-list-wrap">
		<div class="model-content">
			<!--搜索条件-->
			<div class="model-content-seach">
				<el-form>
					<el-form-item>
						<el-button type="primary" :loading="excelLoading" @click="getExcelData()"  >导出</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="model-content-table">
				<!--表格-->
				<el-table :data="tableData" v-loading="loading" border style="width: 100%">
					<el-table-column label="编号" align="center">
						<template slot-scope="scope">
							{{ scope.$index + 1 }}
						</template>
					</el-table-column>
					<el-table-column label="活动名称" prop="item_name" align="center">
					</el-table-column>
					<el-table-column label="姓名" prop="name" align="center">
					</el-table-column>
					<el-table-column label="电话" prop="mobile" align="center">
					</el-table-column>
					<el-table-column label="地址" prop='area_name' align="center">
					</el-table-column>
					<el-table-column label="街道" prop='address' align="center">
					</el-table-column>
					<el-table-column label="报名时间"  align="center">
						<template slot-scope="scope">
							{{ scope.row.created_at  }}
						</template>
					</el-table-column>
					<el-table-column label="状态"  align="center">
						<template slot-scope="scope" >
							<span v-if="scope.row.status === 10" style="color: orange" >待处理</span>
							<span v-if="scope.row.status === 20" style="color: green;" >已处理</span>
						</template>
					</el-table-column>
					<el-table-column label="操作"  align="center">
						<template slot-scope="scope"  >
							<el-button v-if="scope.row.status === 10" type="text" size="small" @click="toExamine(scope.row)" >审核</el-button>
							<el-button v-if="scope.row.status === 20" type="text" size="small" @click="toExamineBack(scope.row)" style="color: red;" >撤销</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页-->
			<div class="model-footer">
				<el-pagination @current-change="handleCurrentChange" :current-page="page.current_page" :page-size="page.per_page"
layout="total, prev, pager, next, jumper" :total="page.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		USER_BOOK
	} from '@/api/good'
	export default {
		data() {
			const role_id = +localStorage.getItem('role_id')
			return {
				role_id,
				loading: false,
				tableData: [],
				page: {},
				excelLoading: false,
				excelData: []
			}
		},
		watch: {
			$route() {
				this.initPageQuery()
			}
		},
		mounted() {
			this.initPageQuery()
		},
		methods: {
			handleCurrentChange(page) {
				this.$routePlugin.addQuery({
					page
				});
			},
			initPageQuery() {
				const {
					page
				} = this.$route.query

				this.searchRequest({
					page
				})
			},
			searchRequest(options) {
				const {
					page
				} = options

				let params = {}
				params['page'] = page || 1
				this.initPageData(params)
			},
			initPageData(params) {
				this.loading = true
				this.$http.get(USER_BOOK, {
					params
				}).then(res => {
					this.loading = false
					const {
						data,
						meta
					} = res.data

					this.tableData = data;
					this.page = meta
				})
			},
			toExamine(row) {
				this.$confirm('确认要通过该报名？', '温馨提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					
					this.$http.put(`${USER_BOOK}/${row.id}`, {
						status: 20
					})
						.then(() => {
							this.$message({
								type: 'success',
								message: '确认成功!'
							});
							this.initPageQuery()
						})
				}).catch(() => {
				
				});
			},
			toExamineBack(row) {
				this.$confirm('确认要撤销该报名？', '温馨提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					
					this.$http.put(`${USER_BOOK}/${row.id}`, {
						status: 10
					})
						.then(() => {
							this.$message({
								type: 'success',
								message: '撤销成功!'
							});
							this.initPageQuery()
						})
				}).catch(() => {
				
				});
			},
			getExcelData(pageF = 1) {	//导出
				if (pageF === 1) {
					this.excelLoading = true
					this.excelData = []
				}
				console.log(pageF, 55)
				let params = {}
					params['page'] = pageF || 1
					params['per_page'] = 1000
					this.$http.get(USER_BOOK, {
						params
					}).then((res) => {
						const {
							data,
							meta
						} = res.data
						
						let excelArr = []
							data.forEach((item, index) => {
								const arr = {
									index: index +1,
									item_name: item.item_name,
									name: item.name,
									mobile: item.mobile,
									area_name: item.area_name,
									address: item.address,
									created_at: item.created_at,
									status: item.status === 10 ? ' 待处理' : '已处理'
								}
								excelArr.push(arr)
							})
							this.excelData = this.excelData.concat(excelArr)
						
						if(meta.current_page <  meta.last_page) {
							
							this.getExcelData(+meta.current_page + 1)
						}else {
							this.excelLoading = false
							this.exportExcel()
						}
						
					})
					.catch(() => {
						this.excelLoading = false;
					});
			},
			exportExcel(){
				
				require.ensure([], () => {
					const { export_json_to_excel } = require('@/tool/Export2Excel')
					const tHeader = ['编号', '活动名称', '姓名', '电话', '地址', '街道', '报名时间', '状态']
					const filterVal = ['index', 'item_name', 'name', 'mobile', 'area_name', 'address', 'created_at', 'status']
					const list = this.excelData
					const data = this.formatJson(filterVal, list)
					export_json_to_excel(tHeader, data, '预约购买列表')
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
		}
	}
</script>

<style lang="scss">
	.good-list-wrap {}
</style>
